<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>用户显示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <script type="text/javascript" src="../../layuiadmin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../layuiadmin/layui/xadmin.js"></script>
    <script type="text/javascript" src="../../layuiadmin/js/system/jquery.min.js"></script>
    <script src="../../layuiadmin/js/system/jquery.cookie.js"></script>

</head>
<body>
<div class="layui-form" id="form">
    <div class="demoTable">
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
    <div class="layui-form-item">
    <div class="layui-tab-item layui-show">
        <div class="layui-inline">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-inline">
                <select  lay-filter="LAY-user-adminrole-type"id="role">
                    <option value="-1">全部角色</option>
                </select>
            </div>
            <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="userName" id="userName"  placeholder="用户名称" class="layui-input">
            </div>
            </div>
            <button class="layui-btn" data-type="reload" type="button">搜索</button>
            <button class="layui-btn" type="button" id="insUser">添加</button>
        </div>
    </div>
    </div>
</div>
    </div>
</div>
<!--<button class="layui-btn" id="export">-->
    <!--<i class="iconfont icon-export"></i> 导出-->
<!--</button>-->
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <!--用户表-->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
<script>
    function createrFormat(o){
        return o;
    }
    layui.use('table', function(){
        var table = layui.table;
        var ins1=table.render({
            elem: '#test'
            ,height:510
            ,width:1290
            ,url:'http://localhost:8080/user/userlist'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'userId', title:'ID', width:160, align:'center',fixed: 'left', unresize: true, sort: true}
                ,{field:'userName', title:'用户名',align:'center', width:220,}
                ,{templet:'<div>{{createrFormat(d.hrEmp.empName)}}<\/div>', align:'center',title:'员工名称', width:220, }
                ,{templet:'<div>{{createrFormat(d.roleId.roleName)}}<\/div>>', width: 250,align:'center', title: '角色名称'}
                // ,{field:'userStatus', title:'状态',align:'center', width:180}
                ,{fixed: 'right', title:'操作',align:'center', toolbar: '#barDemo', width:370}
            ]]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [  'prev', 'page', 'next', 'skip','count','limit'] //自定义分页布局
                ,curr: 1 //设定初始在第 1 页
                ,limit:5 //一页显示多少条
                ,limits:[2,5,10]//每页条数的选择项
                ,groups: 2 //只显示 2 个连续页码
            }
            ,id:'usertable'
            // ,done: function (res, curr, count) {
            //     exportData=res.data;
            // }
        });
        //监听表格复选框选择
        table.on('checkbox(test)', function(obj){
            console.log(obj);
        });
        //下拉框高级查询
        var $=layui.$,active={
            reload:function () {
                var selectrole=$("#role").val();
                var userName=$("#userName").val();
                //执行重载
                table.reload('usertable',{
                    page:{
                        curr:1//重新从第一页开始
                    }
                    , where:{
                        roleId:selectrole,
                        userName:userName,
                    }
                },'data'
                );
            }
        }
        // $("#export").click(function(){
        //     table.exportFile(ins1.config.id,exportData, 'xls');
        // })

        $('.demoTable .layui-btn').on('click',function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        })

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            $.cookie("tableUserId",data.userId);
            var roleid=$.cookie("role_id");
            var redisId=$.cookie("redisId");
            var tableuserid=$.cookie("tableUserId");
            if(obj.event === 'del' && roleid==1){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                    //向服务端发送删除指令，获取后端
                    $.ajax({
                        type: 'get',
                        url:"http://localhost:8080/user/delUser",
                        data: {
                            userId: data.userId,  //此处是根据id查询此id是否被删除，故将id传向后端
                        },
                        contentType: 'application/json',
                        success: function (data) {
                            layer.msg('删除成功啦', { icon: 1 }, { time: 2000 });
                        },
                        error: function (data) {
                            layer.msg('连接网络失败，请检查网络设置或联系管理员', { icon: 2 }, { time: 2000 });
                        }
                    });
                });
            } else if(roleid!=1){
                layer.msg('您没有权限删除用户', { icon: 1 }, { time: 2000 });
            }else if(obj.event === 'edit' && (tableuserid==redisId||roleid==1) ){
                window.location.href="updateUser.html";
            }else if(obj.event === 'edit' && (tableuserid!=redisId||roleid!=1) ){
                layer.msg('您没有权限修改此用户', { icon: 1 }, { time: 2000 })
            }
        });
    });
</script>
    <script>
        $(function () {
            var role=$("#role");
            $.post("http://localhost:8080/user/listuserRole",
                function(msg) {
                    for(var i=0;i<msg.length;i++){
                        role.append("<option value="+msg[i].roleId+">"+msg[i].roleName+"</option>")
                        layui.use('form', function(){
                            var form = layui.form;
                            form.render("select");
                        });
                    }
                })
            $("#insUser").click(function () {
                window.location.href="insUser.html";
            })
        })
    </script>
</body>
</html>